@import url("mobile.css");
html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

body{
  
  background-color:#333;
  
  .main{
    width:100%;
    
    
    .slide{
      width:50%;
      margin:0 auto;
      position:relative;
      // padding:0 10px;
      
       @pnFontSize:2em;
       .prev,.next{
         position:absolute;
         font-size:@pnFontSize;
         width:@pnFontSize/2;
         height:@pnFontSize/2;
         line-height:@pnFontSize/2;
         display:inline-block;
         top:50%;
         margin-top:@pnFontSize/4*-1;
         text-align:center;
         z-index:5;
         color:#fff;
         cursor:default;
         user-select:none;
       }
       
       .prev{
         left:@pnFontSize/4;
       }
       
       .next{
         right:@pnFontSize/4;
       }
      
      .container{
        
        .slide-item{
          
          img{
            display:block;
            width:100%;
            height:253.69px;
          }
        }
      }
      
      @pageSize:.5em;
      .page{
        position:absolute;
        bottom:.3em;
        z-index:5;
        height:@pageSize*2;
        line-height:@pageSize*2;
        left:50%;
        transform:translateX(-50%);
        
          
        ul{
          display:inline-block;
          margin:0;
          padding:0;
          height:@pageSize*2;
          line-height:@pageSize*2;
          
          li{
            display:inline-block;
            width:@pageSize*3;
            height:@pageSize/2;
            list-style:none;
            padding:0;
            margin:0 @pageSize/4;
            border-radius:@pageSize/4;
            // background-color:#fff;
            background-color:rgba(255,255,255,.5);
          }
          
          li.on{
            background-color:red;
          }
        }
        
      }
      
    }
  }
}